<?php 
$cdnUrl='http://lin.mei94.com/h5/';
if ('localhost' == $_SERVER['HTTP_HOST']){
	$cdnUrl='./';
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>几何艺术</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{background:#ffffff;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow:hidden;}
body, div{margin:0;padding:0;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:4px;color:#787c7f;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder{text-align:left;color:#a2a2a2;}
select{position:absolute;color:#787c7f;display:block;background:transparent;border:0px;text-indent:4px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.page{position:absolute;width:100%;height:100%;}
.p1{position:absolute;width:100%;height:100%;}
.thebg{position:absolute;width:100%;top:0;left:0;}
.hide{display:none;}
.animated{animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite{animation-iteration-count: infinite;}
.animated.delay-1s {animation-delay: 1s;}
.tobg{position:absolute;width:100%;height:100%;background:#fff;}
.s1{background:#d2cdba;}
.s26{background:#e0e0e0;}
.logo{position:absolute;top:0;left:0;z-index:2;}
.p1-t1, .p1-t2, .sl-t{position:absolute;width:100%;top:0;left:0;}
.p1-t3{position:absolute;width:100%;bottom:0;left:0;}
.s4-bot{position:absolute;width:100%;height:25%;bottom:0;left:0;background:#e6e6e8;}
.flipbook-viewport{opacity:0;} 
</style>
<link rel="stylesheet" type="text/css" href="css/basic.css?v=1"/>
</head><body>
<div class="flipbook-viewport">
<div class="container">
    <div class="flipbook">
      <div class="swiper-slide">
         <div class="tobg s1"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p1.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p2.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p3.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s4-bot"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p4.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p5.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p6.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p7.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p8.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s4-bot"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p9.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p10.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p11.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p12.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p13.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p14.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s4-bot"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p15.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p16.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s4-bot"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p17.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p18.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p19.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s4-bot"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p20.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p21.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p22.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p23.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p24.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="<?php echo $cdnUrl ?>jihe/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p25.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg s26"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>jihe/p26.jpg" />
         </div>
      </div>

  </div>
</div>

</div>
<div style="display:none;">
  <audio id="music" loop="loop"><source src="http://lin.mei94.com/dian/1.mp3"  type="audio/mpeg"></audio>
</div>
<script src="http://mat1.gtimg.com/libs/jquery2/2.1.4/jquery2.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/pxloader-images.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/modernizr.2.5.3.min.js?v=2"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
theH=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1334){h=_rate*1334;}
var _img=['logo.png'];
var loader = new PxLoader();
for(var i=0; i<_img.length; i++){loader.addImage('<?php echo $cdnUrl ?>jihe/'+_img[i]);}
var _music=document.getElementById("music");
loader.start();
loader.addCompletionListener(function(e){
	$(".flipbook-viewport").addClass("fade-in").css({"opacity":1});
	   _music.play(); 
	   document.addEventListener("WeixinJSBridgeReady", function () { _music.play(); }, false);
});
$(function(){
	$('body').on('touchmove',function(e){
		//e.preventDefault();
	});
	$('.sl-t').width(sWidth).height(_rate*1334);
	$('.swiper-container').width(sWidth).height(h);
	$('.s1-en').width(_rate*181).height(_rate*65).css({"top":0, "right":0});
	
	$('.logo').width(_rate*336).height(_rate*122)
	$('.p18-t1').width(_rate*586).height(_rate*392);
	$('.p24-t1').width(_rate*590).height(_rate*307);

	 
	 
	 if(theH > _rate*1334){
        var _cha= h - _rate*1334;
        $('.thebg').css({"top":_cha/2});
        $('.logo').css({"top":_cha/2.6});
     }else{


     }

	 yepnope({test : Modernizr.csstransforms,yep: ['js/m.js?v=1'],complete: loadApp});
 

});
</script>
</body></html>